import React, {Component} from 'react';
import {withRouter, Link, Switch, Route, HashRouter as Router} from 'react-router-dom'
import {Layout, Menu, Icon, Input, Dropdown, Drawer, Button, message} from 'antd';
import u from '../common.js'

import PersonalInfo from "./personal/personalInfo"

import 'antd/dist/antd.css';
import "./../static/basicStyle.styl";
import $ from 'jquery';

import Data from './data.jsx';
import Postbar from './postbar';
import Capture from './capture.jsx';
import Disposal from './disposal.jsx';
import Keywords from './keywords.jsx';
import Loading from './loading.js'
import ForDisposal from './forDisposal.jsx'
import FraudSms from './fraudSms.jsx'
import IllicitName from './illicitName'
const {Header, Sider, Content} = Layout;
const SubMenu = Menu.SubMenu;

if (window.performance) {
  localStorage.setItem('create_time', '')
  localStorage.setItem('description', '')
  localStorage.setItem('disposalSource', '')
  localStorage.setItem('endTime', '')
  localStorage.setItem('getSource', '')
  localStorage.setItem('grabInformation', '')
  localStorage.setItem('jingquechaxun', '')
  localStorage.setItem('timeEnd', '')
  localStorage.setItem('timeStart', '')
  localStorage.setItem('setResetWord2', '')
  localStorage.setItem('setResetWord', '')
  localStorage.setItem('isPass', '')
  
}

// @withRouter
export default class BasicPage extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      username: '',
      visible: false,
      placement: 'left'
    }
  }
  
  componentDidMount() {
    this.setState({
      username: localStorage.getItem('username')
    })
  }

  // state = {
  //   visible: false,
  //   placement: 'left'
  // };

  showDrawer = () => {
    this.setState({
      visible: true,
    });
  };

  goRouter(d) {
    this.props.history.push(d)
    localStorage.setItem('create_time', '')
    localStorage.setItem('description', '')
    localStorage.setItem('disposalSource', '')
    localStorage.setItem('endTime', '')
    localStorage.setItem('getSource', '')
    localStorage.setItem('grabInformation', '')
    localStorage.setItem('jingquechaxun', '')
    localStorage.setItem('timeEnd', '')
    localStorage.setItem('timeStart', '')
    localStorage.setItem('setResetWord2', '')
    localStorage.setItem('setResetWord', '')
    localStorage.setItem('isPass', '')
    localStorage.setItem('getchizhiren','')
  }

  onChange = (e) => {
    this.setState({
      placement: e.target.value,
    });
  }

  onClose = () => {
    this.setState({
      visible: false,
    });
  };

  clearPassword () {
    localStorage.removeItem('username')
    localStorage.removeItem('password')
  }

  onAdd () {
    let badUrl = $('.badUrl').val()
    let badName = $('.badName').val()
    if (badUrl.trim() === '' || badName.trim() === '') {
      return message.error('不能为空')
    }
    u.badMessage({  
      url: badUrl,
      cname: badName
    },data =>{
      if (data.code === 200) {
        message.success('添加成功')
      }
    })
  }

  render() {
    const menu = (
      <Menu>
        <Menu.Item>
          <a href="javascript:void(0);" onClick={() => this.goRouter("/personalInfo")}>修改密码</a>
        </Menu.Item>
        <Menu.Item>
          {/* <a href="javascript:void(0);">退出系统</a> */}
          <Link to='/login' onClick={this.clearPassword}>退出系统</Link>
        </Menu.Item>
      </Menu>
    );

    return (
      <Layout id="basicContainers">
      <Loading />
      <Drawer
          title="   "
          placement={this.state.placement}
          closable={false}
          onClose={this.onClose}
          visible={this.state.visible}>
          {/* <Sider
            trigger={null}
            collapsible
            collapsed={this.state.collapsed}
          > */}
            {/* <div className="logo">猎狐平台</div> */}
            <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
              <Menu.Item key="1" onClick={() => this.goRouter("/capture")}>
                <Icon type="fund" theme="outlined" style={{fontSize: 20}}/>
                <span>数据抓取预览</span>
              </Menu.Item>
              <Menu.Item key="2" onClick={() => this.goRouter("/forDisposal")}>
                <Icon type="profile" theme="outlined" style={{fontSize: 20}}/>
                <span>待处置列表</span>
              </Menu.Item>
              <Menu.Item key="4" onClick={() => this.goRouter("/disposal")}>
                <Icon type="profile" theme="outlined" style={{fontSize: 20}}/>
                <span>已处置列表</span>
              </Menu.Item>
              <Menu.Item key="3" onClick={() => this.goRouter("/keywords")}>
                <Icon type="read" theme="outlined" style={{fontSize: 20}}/>
                <span>关键词列表</span>
              </Menu.Item>
              <Menu.Item key="5" onClick={() => this.goRouter("/fraudSms")}>
                <Icon type="read" theme="outlined" style={{fontSize: 20}}/>
                <span>欺诈短信</span>
              </Menu.Item>
              <Menu.Item key="6" onClick={() => this.goRouter("/illicitName")}>
                <Icon type="read" theme="outlined" style={{fontSize: 20}}/>
                <span>非法域名</span>
              </Menu.Item>
            </Menu>
          {/* </Sider> */}
        </Drawer>
        <Layout>
          <Header className="basicHeader">
            {
              function () {
                if (this.state.username !== 'gonganbu' && this.state.username !== 'Gonganbu') {
                  return (
                    <Button type="primary" onClick={this.showDrawer}>
                      展开
                   </Button>
                  )
                }
              }.call(this)
            }
            <div className="basicSearch">
              <div className="wStyle"><span>疑似有害网址: </span><Input className="badUrl" placeholder="请输入添加内容..."/></div>
              
              <div className="wStyle"><span>名称: </span><Input className="badName" placeholder="请输入添加内容..."/></div>

              <Button className="butStyle" type="primary" onClick={this.onAdd}>添加</Button>
              
              {/* <img src={require("./../static/image/search_icon.png")} alt=""/> */}
            </div>
            <div className="persoalCenter">
              <img src={require("./../static/image/notification.png")} alt="" align='top'/>
              <Dropdown overlay={menu}>
                <a className="ant-dropdown-link" href="#" style={{margin: '22px'}}>
                {this.state.username} <Icon type="down"/>
                </a>
              </Dropdown>
              {/* <img src={require("./../static/image/userLogo.png")} alt="" className="userImg"/> */}
            </div>
          </Header>
          <Content style={{margin: '20px', height: "100%", background: '#fff', position: "relative"}}>
            <Switch>
              <Route path='/capture' component={Capture}/>
              <Route path='/postbar' component={Postbar}/>
              <Route path='/data' component={Data}/>
              <Route path='/disposal' component={Disposal}/>
              <Route path='/forDisposal' component={ForDisposal}/>
              <Route path='/keywords' component={Keywords}/>
              <Route path='/personalInfo' component={PersonalInfo}/>
              <Route path='/fraudSms' component={FraudSms}/>
              <Route path='/illicitName' component={IllicitName}></Route>
            </Switch>
          </Content>
        </Layout>
      </Layout>
    );
  }
}
